import React, { useRef } from 'react';
import HgBreadCrumb from '../../../components/HgBreadCrumb';
//1.导入组件
import { Editor } from '@tinymce/tinymce-react';
import { Button } from 'antd';
const HgEditor = () => {
    
    const editorRef:any = useRef(null);

    const log = () => {
        //editorRef.current.getContent() 调用组件实例的getContent方法,获取编辑器的内容
        if (editorRef.current) {
          console.log(editorRef.current.getContent());
        }
    };
    return (
        <div className='editor'>
            <HgBreadCrumb />
            
            {/* 2.渲染组件 */}
            {/* onInit Editor 编辑器组件 初始化的回调函数( 通过参数获取组件实例 ) */}
            <Editor
                apiKey='your-api-key'
                onInit={(evt, editor) => editorRef.current = editor}
                init={{
                height: 500,
                menubar: false,
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
                ],
                toolbar: 'undo redo | blocks | ' +
                    'bold italic forecolor | alignleft aligncenter ' +
                    'alignright alignjustify | bullist numlist outdent indent | ' +
                    'removeformat | help',
                content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
                }}
            />
            <Button onClick={log}>发布</Button>
        </div>
    );
};

export default HgEditor;